<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--设置标签图标-->
    <link href="favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/goods_list.css">
    <link rel="stylesheet" href="css/pageStyle.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!--头部-->
<div id="header">
    <!--顶部-->
    <div class="header_top">
        <div class="header_top_center">
            <div class="h_top_left">
                欢迎来到码蚁商城
            </div>
            <div class="h_top_right">
                <a href="login.html">登录</a>
                <a href="regist.html">免费注册</a>
                <a href="#">购物车</a>
                <a href="#">我的订单</a>
            </div>
        </div>
    </div>
    <!--中部搜索-->
    <div class="header_center">
        <div class="h_c_logo">
            <img src="images/logo.png" alt="">
        </div>

        <div class="h_c_search">
            <form action="#" >
                <input type="text" placeholder="输入一些内容。。。" class="t_input">
                <input type="submit" class="t_button">
            </form>
            <div class="hot">
                <a href="#">新款连衣裙</a>
                <a href="#">四件套</a>
                <a href="#">潮流T恤</a>
                <a href="#">时尚女鞋</a>
                <a href="#">短裤半身裙</a>
            </div>
        </div>

        <div class="h_c_code">
            <img src="images/pcode.png" alt="">
        </div>
    </div>
    <!--导航-->
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="goods_list.html">电脑办公</a></li>
            <li><a href="#">家具家居</a></li>
            <li><a href="#">鲜果时光</a></li>
            <li><a href="#">图书音像</a></li>
            <li><a href="#">母婴孕婴</a></li>
        </ul>
    </div>

</div>

<!--热卖-->
<div id="hot_goods">
    <h3>热卖商品</h3>
    <div class="hot_goods_body">
        <ul>
            <li>
                <a href="">
                    <img src="images/goods/goods6.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/goods/goods7.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/goods/goods8.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/goods/goods9.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/goods/goods10.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/goods/goods11.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/goods/goods12.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/goods/goods13.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/goods/goods14.png" alt="">
                    <p>小米（MI）小米净化器2智能家用卧室空气净化器除甲醛雾霾P</p>
                    <i class="yuan">￥</i><span class="price">599</span>
                </a>
            </li>
        </ul>
    </div>

</div>

<div id="page" class="page_div"></div>
<!--尾部-->
<div id="footer">
    <div class="link">
        <a href="#">关于我们</a>
        |
        <a href="#">联系我们</a>
        |
        <a href="#">人才招聘</a>
        |
        <a href="#">商家入驻</a>
        |
        <a href="#">广告服务</a>
        |
        <a href="#">手机码蚁</a>
        |
        <a href="#">友情链接</a>
        |
        <a href="#">销售联盟</a>
        |
        <a href="#">码蚁社区
        </a>
        |
        <a href="#">码蚁公益</a>
    </div>
    <div class="copyrigth">
        Copyright&nbsp;&copy;&nbsp;2017-2018&nbsp;&nbsp;码蚁My.com&nbsp;版权所有
    </div>
</div>



<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script>
    //分页
    $("#page").paging({
        pageNo:3,  /*当前选中的是哪一页*/
        totalPage: 15, /*共多少页*/
        totalSize: 300,/*共多少条记录*/
        callback: function(num) {
           console.log(num);
        }
    })
</script>
</body>
</html>

<!--
1.把css引入到项目 当中
2.把分页的代码写到对应的位置  <div id="page" class="page_div"></div>
3.引入js   在尾部引入js

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script>
    //分页
    $("#page").paging({
        pageNo:3,  /*当前选中的是哪一页*/
        totalPage: 15, /*共多少页*/
        totalSize: 300,/*共多少条记录*/
        callback: function(num) {
           console.log(num);
        }
    })
</script>

-->